<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="referrer" content="no-referrer" />
		<title></title>
		<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
		<link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-114x114.png">
		<link rel="stylesheet" type="text/css" href="./css/tabdemo.css" />
		<style>
			.title>ul>li {
							float: left;
						}
			
				.title>h3 {
					font-size: 20px;
					float: left;
					font-weight: bold;
				}
	
				.title>ul>li>a {
					margin-left: 10px;
					height: 24px;
					line-height: 24px;
					cursor: pointer;
					color: #9b9b9b;
				}
	
				
	
				.title {
					margin-top: 30px;
					margin-left: 150px;
				}
				.a{
					height: 95px;
				}
				
			
		</style>
		<script src="js/jquery-3.1.1.min.js"></script>
	</head>
	<body>
		<div class="tabox">
			<div class="title">
				<h3>热门电影</h3>
				<ul>
					<li class="a1"><a>推荐</a></li>
					<li class="a2"><a>限免</a></li>
					<li class="a3"><a>热点</a></li>
					<li class="a4"><a>电视剧</a></li>
					<li class="a5"><a>电影</a></li>
					<li class="a6"><a>综艺</a></li>
					<li class="a7"><a>动漫</a></li>
					<li class="a8"><a>儿童</a></li>
				</ul>
			</div>
			
			<div class="a">
				
			</div>				
			
			<div class="bd">
				<ul class="lh lh1">
							
				</ul>
				<ul class="lh lh2" style="display: none;">
			
				</ul>
				<ul class="lh lh3" style="display: none;">
			
				</ul>
				<ul class="lh lh4" style="display: none;">
			
				</ul>
				<ul class="lh lh5" style="display: none;">
			
				</ul>
			</div>
		</div>
		<script>
			//179000845江沿蒙
		$(function() {

			$(".hd li").click(function() {

				$(".hd ul *").removeClass("on");
				$(this).addClass("on");
				var n = $(this).index();
				$(".bd .lh:eq(" + n + ")").show();
				$(".bd .lh").not($(".bd .lh:eq(" + n + ")")).hide();

			});
			
			$.ajax({
				url: 'https://douban.uieee.com/v2/movie/top250',
				type: 'get',
				async: true,
				dataType: 'json',
				success: function(data) {
					var html = '';
					for (var i = 0; i < 5; i++) {
						html += '<li><img src="' + data.subjects[i].images.small + '" width="120" height="160"><p>豆瓣评分:' + data.subjects[i].rating.average + '</p></li>';
					}
					$(".lh1").append(html);
					}
				});
				
			})
		</script>
	</body>
</html>
